<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-11 09:50:52
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-09-11 13:37:17
 * @FilePath: \tch-h5\src\views\hotel-detail\HotelDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Header title="酒店详情" :back="true" />
  <div class="hotel-detail">
    <template v-if="!loading">
      <div class="detail-img">
        <van-swipe :autoplay="3000" indicator-color="white" @click="handelswip">
          <van-swipe-item v-for="(item, index) in hotelInfo?.coverImageList || []" :key="index">
            <van-image class="img" :src="`${fileUrl}/${item}` || ''" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>
    <van-skeleton v-else>
      <template #template>
        <div :style="{ display: 'flex', width: '100vw' }">
          <van-skeleton-image :style="{ width: '100%', height: '28rem' }" />
        </div>
      </template>
    </van-skeleton>
    <!-- 引入产品详情组件 -->
    <ProductDetails :data="hotelInfo" :time="hotelTime" :loading="loading">
      <!-- 列表 -->
      <template v-if="!loading">
        <HotelDetailsCard :hotelInfo="hotelCommodityList" />
      </template>
      <van-skeleton v-else>
        <template #template>
          <div :style="{ width: '100%' }">
            <template v-for="i in 2" :key="i">
              <div :style="{ display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '2rem' }">
                <van-skeleton-image :style="{ width: '100%' }" />
                <div :style="{ flex: 1, marginTop: '2rem'}">
                  <van-skeleton-paragraph />
                  <van-skeleton-paragraph row-width="30%" />
                  <van-skeleton-paragraph />
                </div>
              </div>
            </template>
          </div>
        </template>
      </van-skeleton>
      <!-- 简介 -->
      <template #desc>
        <div class="desc_content">
          <div class="desc_header">介绍</div>
          <div style="color: #666666; font-size: 1.6rem;" v-html="addWidthToImages(hotelInfo.basicInformation)" />
          <div class="opening_hours_header">营业时间</div>
          <div v-if="hotelTime.length" class="opening_hours_content">
            <div class="time_list" v-for="item in hotelTime" :key="item">
              <div>
                {{ `${item.timeHour[0]} - ${item.timeHour[1]}营业时间：` }}
              </div>
              <div>
                {{ item.timeSlot[0] }}
              </div>
            </div>
          </div>
          <div class="time_list" v-else>全年24小时营业</div>
        </div>
      </template>
    </ProductDetails>
  </div>
</template>

<script setup>
import { ref } from "vue"
import Header from "@/components/header/Header.vue"
import { showImagePreview } from "vant"
import HotelDetailsCard from "@/components/hotel-details-card/HotelDetailsCard.vue"
import ProductDetails from "@/components/product-details/ProductDetails.vue"
import api from "@/api/index.js"
import { useRoute } from "vue-router"
import { userStore } from "@/stores/user.js"
import { addWidthToImages } from "@/utils/index.js"

const user = userStore()
const route = useRoute()
const hotelId = route.params.id

const fileUrl = import.meta.env.VITE_FILE_URL

const hotelInfo = ref(null)
const hotelTypeTree = ref(null)
const hotelCommodityList = ref([])

const loading = ref(false)
const hotelTime = ref([])
const getthotelDetailInfo = () => {
  loading.value = true
  const params = {
    id: hotelId,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  };
  api.getHotelDetailInfo(params).then((res) => {
    if (res.code === 200 || res.code === '200') {
      hotelInfo.value = res.data.scenicsInfo
      hotelTypeTree.value = res.data.scenicSpotTicke
      hotelTime.value = res.data.scenicSpotTimeSlots
      res.data.scenicSpotTicket?.forEach((item) => {
        if (item.goodsInfoList?.length) {
          hotelCommodityList.value = [...hotelCommodityList.value, ...item.goodsInfoList]
        }
      })
    }
  }).finally(() => {
    loading.value = false
  })
};
getthotelDetailInfo();


// 图片预览
const handelswip = (e) => {
  showImagePreview([e.target.src])
}
</script>

<style lang="scss" scoped>
.hotel-detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  .desc_content{
    overflow-y: auto;
    padding-bottom: 1rem;
    line-height: 1.5;
    .desc_header{
      font-size: 1.6rem;
      font-weight: bold;
      color: #333333;
      margin-bottom: .5rem;
    }
    .opening_hours_header{
      margin-top: 1.5rem;
      font-size: 1.6rem;
      font-weight: bold;
      color: #333333;
      margin-bottom: .5rem;
    }
    .opening_hours_content{
      font-size: 1.4rem;
      color: #666666;
      line-height: 2.2rem;
      .time_list{
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}

.detail-img {
  width: 100%;
  height: 25rem;
}

.img {
  width: 100%;
  height: 39rem;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>